<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>

    <!--bootstrap-fileinput-->
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.css">
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js"></script>
      
    <script>
        $(function () {
            //获取一级
            getOne(0);
            //图片
            fileInit();

        })
        //一级
        function getOne(parentId) {
            $.ajax({
                url:"/goods/getOne/"+parentId,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code == 200){
                        var data=result.data;
                        var tbody="<option value='-1'>请选择</option>";
                        for (var i=0;i<data.length;i++){
                            tbody += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                        }
                        $("#one").html(tbody);
                    }
                },
                error:function (result) {
                    alert("系统错误1")
                }
            })
        }
        //二级
        function getTwo(parentId) {
            $.ajax({
                url:"/goods/getOne/"+parentId,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code == 200){
                        var data=result.data;
                        var tbody="<option value='-1'>请选择</option>";
                        for (var i=0;i<data.length;i++){
                            tbody += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                        }
                        $("#two").html(tbody);
                    }
                },
                error:function (result) {
                    alert("系统错误1")
                }
            })
        }
        //三级
        function getThree(parentId) {
            $.ajax({
                url:"/goods/getOne/"+parentId,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code == 200){
                        var data=result.data;
                        var tbody="<option value='-1'>请选择</option>";
                        for (var i=0;i<data.length;i++){
                            tbody += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                        }
                        $("#three").html(tbody);
                    }
                },
                error:function (result) {
                    alert("系统错误1")
                }
            })
        }
        //获取模板id：
        function getTypeId(obj) {
            var typeId=$(obj).val();//获取值
            var id=parseInt(typeId);//value是string，转成int
            $.ajax({
                url:"/goods/getTypeId/"+id,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code == 200){
                        $("#typeId").html(result.data);
                        //其他
                        getItemTemplate(result.data);
                        //规格
                        selectSpec(result.data);
                    }
                },
                error:function (result) {
                    alert("错误2")
                }
            })
        }
        //获取模板id对应的品牌
        function getItemTemplate(typeId) {
            $.ajax({
                url:"/goods/getItemTemplate/"+typeId,
                type:"post",
                dataType:"json",
                success:function (result) {
                    var data = result.data;
                    var brandIds = data.brandIds;
                    var list=JSON.parse(brandIds);
                    var html ="<option value='-1'>请选择</option>";
                    $.each(list,function (i,e) {
                        html += "<option value='"+e.id+"'>"+e.text+"</option>";
                    })
                    $("#brandId").html(html);

                    //扩展属性
                    var attr=JSON.parse(data.customAttributeItems);//转成对象
                    var info='';
                    $(attr).each(function (i,e) {
                        info +='<div>';
                        info +='<div class="col-md-2 title">'+e.text+'</div>';
                        info +='<div class="col-md-10 data">';
                      // info +='<input  class="form-control" placeholder="'+e.text+'">';
                       info +='<input  class="form-control" placeholder="扩展属性">';
                        info +='</div>';
                        info +='</div>';
                    });
                    $("#customAttrItem").html(info);

                },
                error:function (result) {
                    alert("错误3")
                }
            })
        }
        //查询规格
        function selectSpec(typeId) {
            $.ajax({
                url:"/goods/getSpecAndOption",
                data:{typeId:typeId},
                dataType:"json",
                type:"post",
                success:function (result) {
                    console.log(result);
                    var specList=result.data;
                    var html = '';
                    $.each(specList,function (i,e) {
                        html +='<div><div class="col-md-2 title">'+e.text+'</div>'
                        html +='<div class="col-md-10 data">';
                            $.each(e.options,function (index,ele) {
                            html +='<span>';
                            html +='<input  onclick="checkSpec(this,\''+e.text+'\',\''+ele.optionName+'\')" type="checkbox" >'+ele.optionName+'</span>';
                        })
                        html +='</div></div>';
                    });
                    $("#dataType").html(html);
                },
                error:function (data) {
                    alert("error");
                }
            })
        }
        //定义一个数组，接受选择的数据
        var items=[];
        function checkSpec(event,attributeName,attributeValue) {
            //调用方法判断原集合中是否已有attributeName
          var obj=  searchObjectByKey(items,'attributeName',attributeName);
          if (obj != null){//如果存在
              //追加勾选，取消勾选数据
              if ($(event).prop('checked')){
                  //被勾选，增加数据
                  obj.attributeValue.push(attributeValue)
              }else {
                  //取消勾选
                  obj.attributeValue.splice(obj.attributeValue.indexOf(attributeValue),1);
                  if (obj.attributeValue.length<=0){//如果数据全部移除
                      items.splice(items.indexOf(obj),1);
                  }
              }

          }else {//不存在
              items.push({"attributeName":attributeName,"attributeValue":[attributeValue]});
          }
         // $("#table1").html(JSON.stringify(items));在页面输出结果
        //  $("#table1").html(JSON.stringify(items));
          //勾选之后弹出table表
            createSLKUList(event);
        }

        //遍历组装用户勾选规格选项数据(遍历数组，判断用户选择的attributeName是否已经存在)
        function searchObjectByKey(list,attributeName,attributeValue){//(list,key,value)
            for(var i=0;i<list.length;i++){
                //如果list中我们选择key存在
                if(list[i][attributeName] == attributeValue){
                    return list[i];//返回当前对象
                }
            }
            //遍历结束后都不存在，返回null
            return null;
        }

        //创建初始化值
        var itemList = [ { spec: {} } ];
        //创建SKU列表
        function createSLKUList(event) {
            //创建初始化值
             itemList=[{spec:{}}];
            //遍历items 拆除里面的数据
            for (var i=0;i<items.length;i++){
                itemList=addColum(itemList,items[i].attributeName,items[i].attributeValue);
            }
          //  $("#mysan").html(JSON.stringify(itemList));
            //拼接表格
            if($(event).prop("checked")) {
                var html = '';
                html += '<thead>';
                html += '<tr>';
                for (var i = 0; i < items.length; i++) {
                    html += '<th class="sorting">' + items[i].attributeName + '</th>';
                }
                html += '<th class="sorting">价格</th>';
                html += '<th class="sorting">库存</th>';
                html += '<th class="sorting">是否启用</th>';
                html += '<th class="sorting">是否默认</th>';
                html += '</tr>';
                html += '</thead>';
                html += '<tbody id="tbody">';
                for (var j = 0; j < itemList.length; j++) {
                    html += '<tr>';
                    for (var k = 0; k < items.length; k++) {
                        html += '<td>' + itemList[j].spec[items[k].attributeName] + '</td>';
                    }
                    html += '<td>';
                    html += '<input class="form-control"  placeholder="价格">';
                    html += '</td>';
                    html += '<td>';
                    html += '<input class="form-control" placeholder="库存数量">';
                    html += '</td>';
                    html += '<td>';
                    html += '<input type="checkbox" value="1">';
                    html += '</td>';
                    html += '<td>';
                    html += '<input type="checkbox" value="1">';
                    html += '</td>';
                    html += '</tr>';
                }
                html += '</tbody>';
                $("#table2").html(html);
            }else{
                items = [];
                itemList = [{spec:{}}];
                $("#dataType").find("input").each(function (i,e) {
                    if($(e).prop("checked")){
                        $(e).prop("checked",!$(e).prop("checked"))
                    }
                })
                $("#table2").empty();
            }
        }
        //提取拼接表头和数据
        function addColum(list,attributeName,attributeValue) {
            var newList = [];
            for(var i = 0; i < list.length; i++){
                var oldRow = list[i];
                for(var j=0; j < attributeValue.length; j++){
                    var newRow = JSON.parse(JSON.stringify(oldRow)); //深克隆
                    newRow.spec[attributeName] = attributeValue[j];
                    newList.push(newRow)
                }
            }
            return newList;
        }


        //添加商品
        function insert() {
        //    alert(1111)
            //获取选中的分类id
            var s1=$("#one").find("option:selected");
            var category1Id=s1.val();
            var s2=$("#two").find("option:selected");
            var category2Id=s2.val();
            var s3=$("#three").find("option:selected");
            var category3Id=s3.val();
            //模板
            var typeId = $("#typeId").html();
            var goodsName = $("#goodsName").val();
            var brand = $("#brandId").find("option:selected");
            var brandId=brand.val();
            var caption=$("#caption").val();
            var price=$("#price").val();

            //实例化编辑器对象(富文本编辑器)
            editor.sync();
            //获取边界其中输入的内容
            var introduction = $("#introduction").val();
            var packageList = $("#packageList").val();
            var saleService = $("#saleService").val();
            //获取图片
            var imgList=[];
            $("#img").find("tr").each(function() {
                var tdArr = $(this).children();
                var color = tdArr.eq(0).text();
                var img = tdArr.eq(1).find("img").attr("src");
                var image = {"color": color, "url": img};
                imgList.push(image);
            });
            var  imgJson=JSON.stringify(imgList);
            //拓展属性
           var customAttrItems=[];
            var inputList=$("#customAttrItem").find("input");
            $.each(inputList,function (i,e) {
                var text=$(e).attr("placeholder");
                var value=$(e).val();
                var data={"text":text,"value":value};
                customAttrItems.push(data);
            })
            var customAttributeItems=JSON.stringify(customAttrItems);//转成字符串
            var itemsJson=JSON.stringify(items);
            //规格
            var itemsList = [];//定义数组
            var trs = $("#tbody").find("tr")//遍历表格中的tr
            for(var i = 0;i<imgList.length;i++){
                for(var j = 0;j<itemList.length;j++) {
                    var title = $("#goodsName").val() + "" + imgList[i].color + "";
                    var product = {spec: {}};
                    for (var o = 0; o < items.length; o++) {
                        title += items[o].attributeName + "" + itemList[j].spec[items[o].attributeName] + "";
                        product.spec[items[o].attributeName] = itemList[j].spec[items[o].attributeName];
                    }
                    var tds = $(trs[j]).find("td");
                    product.title = title;
                    product.sellPoint = $("#caption").val();
                    var se3 = $("#three").find("option:selected");
                    product.categoryId  = se3.val();
                    product.image = imgList[i].url;
                    product.price = $(tds[items.length]).find("input").val();
                    product.num = $(tds[items.length + 1]).find("input").val();
                    var status = $(tds[items.length + 2]).find("input");
                    if ($(status).prop("checked")) {
                        product.status = 1;
                    }else{
                        product.status = 0;
                    }
                    var isDefault = $(tds[items.length + 3]).find("input");
                    if ($(isDefault).prop("checked")) {
                        product.isDefault = 1;
                    }else{
                        product.isDefault = 0;
                    }
                    itemsList.push(product);
                }
            }
            var itemListJson = JSON.stringify(itemsList);//转成字符串

            $.ajax({
                url:"/goods/addGood",
                type:"post",
                dataType:"json",
                data:{customAttributeItems:customAttributeItems,category1Id:category1Id,category2Id:category2Id,category3Id:category3Id,typeTemplateId:typeId,goodsName:goodsName,
                    brandId:brandId,caption:caption,price:price, introduction:introduction,packageList:packageList,saleService:saleService,itemImages:imgJson,specificationItems: itemsJson,itemListJson:itemListJson},
                success:function (result) {
                        alert("添加成功");
                        location.reload();
                },
                error:function (result) {
                    alert("错误4")
                }
            })
        }

        function fileInit(){
            $('#uimg').fileinput({
                language: 'zh',
                uploadUrl: '/goods/upLoadFile',
                maxFileCount :3, // 最多同时传送几个图片，需要加multiple注解
                enctype : 'multipart/form-data',
                maxFileSize : 1024, //单位为kb
                allowedFileExtensions : ['jpg', 'gif', 'png'],
                browseClass: 'btn btn-primary'
            });

            $('#uimg').on('fileuploaded',function(event, data, previewId, index){
                if(data.response){//如果有返回值 那么就最终结果就是true
                 //   var imgUrl = data.response.imgUrl;//原先上传图片
                    var imgUrl = data.response.data;//阿里云上传 setData(url)在后段方法里把url设置给了data，所以想拿到url就得.data
                    $("#bimg").val(imgUrl);
                }
            })
        }
        //增加图片
        function addImg() {
            var color=$("#color").val();
            var url=$("#bimg").val();
            var img='';
            img +='<tr>';
            img +='<td>'+color+'</td>';
            img +='<td>';
            img +='<img src="'+url+'" width="100px" height="100px">';
            img +='</td>';
            img +='<td> <button type="button" class="btn btn-default" title="删除" onclick="deleteImg(this)"><i class="fa fa-trash-o"></i> 删除</button></td> ';
            img += '</tr>';
            $("#img").append(img);

        }
        //删除
        function deleteImg(obj) {
            var tr=obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
    </script>
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->

                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">
								   <div class="col-md-2 title">商品分类</div>

		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" id="one" onchange="getTwo(this.value)" >
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="two" onchange="getThree(this.value)" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" id="three" onchange="getTypeId(this)"></select>
		                              			</td>
		                              			<td>
		                           	  				模板ID:<span id="typeId"></span>
		                              			</td>
		                           	  		</tr>
		                           	  	</table>

		                              </div>


                                    <div class="col-md-2 title">商品名称</div>
                                    <div class="col-md-10 data">
                                        <input type="text" class="form-control" id="goodsName"   placeholder="商品名称" value="">
                                    </div>

                                    <div class="col-md-2 title">品牌</div>
                                    <div class="col-md-10 data">
                                        <select class="form-control" id="brandId"></select>
                                    </div>

                                    <div class="col-md-2 title">副标题</div>
                                    <div class="col-md-10 data">
                                        <input type="text" class="form-control" id="caption"  placeholder="副标题" value="">
                                    </div>

                                    <div class="col-md-2 title">价格</div>
                                    <div class="col-md-10 data">
                                        <div class="input-group">
                                            <span class="input-group-addon">¥</span>
                                            <input type="text" class="form-control" id="price" placeholder="价格" value="">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title editer">商品介绍</div>
                                    <div class="col-md-10 data editer">
                                        <textarea name="content" id="introduction"  style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                    </div>

                                    <div class="col-md-2 title rowHeight2x">包装列表</div>
                                    <div class="col-md-10 data rowHeight2x">

                                        <textarea rows="4"  class="form-control" id="packageList"  placeholder="包装列表"></textarea>
                                    </div>

                                    <div class="col-md-2 title rowHeight2x">售后服务</div>
                                    <div class="col-md-10 data rowHeight2x">
                                        <textarea rows="4"  class="form-control"  id="saleService"  placeholder="售后服务"></textarea>
                                    </div>


                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="img">
					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type" id="customAttrItem">
                                   <!-- <div>
                                        <div class="col-md-2 title">扩展属性1</div>
                                         <div class="col-md-10 data">
                                            <input class="form-control" placeholder="扩展属性1">
                                         </div>
                                         </div>
                                         <div>
                                                  <div class="col-md-2 title">扩展属性2</div>
                                                  <div class="col-md-10 data">
                                                    <input class="form-control" placeholder="扩展属性2">
                                        		    </div>
                                                                        </div>-->
                                                                        </div>
                                                                    </div>

                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="dataType">
                                        <!--<div>-->
                                        <!--<div class="col-md-2 title">屏幕尺寸</div>-->
                                        <!--<div class="col-md-10 data">-->
                                        <!--					                               -->
                                        <!-- <span>-->
                                        <!--<input  type="checkbox" >4.0 	                            	-->
                                        <!--  </span>  	-->
                                        <!--<span>-->
                                        <!--<input  type="checkbox" >4.5                             	-->
                                        <!--</span>-->
                                        <!--<span>-->
                                        <!--<input  type="checkbox" >5.0					                            				                            	-->
                                        <!-- </span>												-->
                                        <!--					                            	-->
                                        <!--</div>-->
                                        <!-- </div>   -->
	                                </div>
	
	                                
	                                <div id="table1" class="row data-type">
                                        <table class="table table-bordered table-striped table-hover dataTable" id="table2">
                                            <!--						                    <thead>-->
                                            <!--						                        <tr>					                          -->
                                            <!--												    <th class="sorting">屏幕尺寸</th>-->
                                            <!--													<th class="sorting">网络制式</th>-->
                                            <!--												    <th class="sorting">价格</th>-->
                                            <!--												    <th class="sorting">库存</th>-->
                                            <!--												    <th class="sorting">是否启用</th>-->
                                            <!--												    <th class="sorting">是否默认</th>-->
                                            <!--											    </tr>-->
                                            <!--								            </thead>-->
                                            <!--						                    <tbody>-->
                                            <!--						                      <tr>-->
                                            <!--										            <td>-->
                                            <!--										            	4.0-->
                                            <!--										            </td>-->
                                            <!--													<td>-->
                                            <!--										            	3G-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										           		<input class="form-control"  placeholder="价格">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										            	<input class="form-control" placeholder="库存数量">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										             	<input type="checkbox" >-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										                <input type="checkbox" >-->
                                            <!--										            </td>-->
                                            <!--						                      </tr>-->
                                            <!--											  <tr>					                           -->
                                            <!--										            <td>-->
                                            <!--										            	4.0-->
                                            <!--										            </td>-->
                                            <!--													<td>-->
                                            <!--										            	4G-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										           		<input class="form-control"  placeholder="价格">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										            	<input class="form-control" placeholder="库存数量">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										             	<input type="checkbox" >-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										                <input type="checkbox" >									             	-->
                                            <!--										            </td>-->
                                            <!--						                      </tr>-->
                                            <!--											  <tr>					                           -->
                                            <!--													<td>-->
                                            <!--										            	5.0-->
                                            <!--										            </td>-->
                                            <!--													<td>-->
                                            <!--										            	3G-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										           		<input class="form-control"  placeholder="价格">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										            	<input class="form-control" placeholder="库存数量">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										             	<input type="checkbox" >-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										                <input type="checkbox" >									             	-->
                                            <!--										            </td>-->
                                            <!--						                      </tr>-->
                                            <!--											  <tr>					                           -->
                                            <!--													<td>-->
                                            <!--										            	5.0-->
                                            <!--										            </td>-->
                                            <!--													<td>-->
                                            <!--										            	4G-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										           		<input class="form-control"  placeholder="价格">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										            	<input class="form-control" placeholder="库存数量">-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										             	<input type="checkbox" >-->
                                            <!--										            </td>-->
                                            <!--										            <td>-->
                                            <!--										                <input type="checkbox" >									             	-->
                                            <!--										            </td>-->
                                            <!--						                      </tr>-->
                                            <!--											  -->
                                            <!--						                    </tbody>-->
                                        </table>
	                                </div>
	                                <div id="mysan"></div>
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="insert()" ><i class="fa fa-save" ></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" placeholder="颜色" id="color">  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
                                    <label for="uimg">上传图片</label>
                                    <input type="file"class="form-control" name="myFile" id="uimg">
                                    <input type="text" name="bimg" id="bimg">
					            </td>
							<!--	<td>
									<img  src="" width="200px" height="200px">
								</td>-->
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" onclick="addImg()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>
       
</body>

</html>